<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>BWH攻击演示</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style>
        .root {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .main {
            width: 1200px;
            height:700px;
            /*border: 1px solid red;*/
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .edit {
            /*border: 1px solid black;*/
            width: 300px;
            height: 700px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            padding: 100px 50px;
            box-sizing: border-box;
        }
        .input-power {
            width: 50px;
        }
        .btn {
            width: 100px;
            height: 40px;
            border-radius: 10px;
            margin: 50px 0;
            cursor: pointer;
        }
        .gragh {
            width: 580px;
            height: 340px;
            /*border: 1px solid blue;*/
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="root">
        <div class="main">
            <div id="gragh1" class="gragh"></div>
            <div id="gragh2" class="gragh"></div>
            <div id="gragh3" class="gragh"></div>
            <div id="gragh4" class="gragh"></div>
        </div>
        <div class="edit">
            <h4>发起BWH攻击</h4>
            <div>
                <span>矿工1分配</span>
            <input type="text" placeholder="小于0.2" id="bwh" class="input-power"/>
            <span>算力对矿池进行攻击</span>
            </div>

            <input type="button" value="发起攻击" class="btn" onclick="BeginBWH()" />
            <input type="button" value="获取真实结果" class="btn" onclick="getFinal()" />
        </div>
    </div>

<!--    页面初始化-->
    <script>
        let begin_BWH = false;
        //概率区间
        let split1=0.2;
        let split2=0.5;
        let split1_BWH=0;
        let split2_BWH=0;
        const Len=4000;

        let count = 0;

        let xData = Array.from(Array(Len), (v,k) => k+1);
        let attacker = Array.from(Array(Len), (v,k) => 0);
        let pool = Array.from(Array(Len), (v,k) => 0);
        let other = Array.from(Array(Len), (v,k) => 0);

        let attacker_normal = Array.from(Array(Len), (v,k) => 0);
        let pool_normal = Array.from(Array(Len), (v,k) => 0);
        let other_normal = Array.from(Array(Len), (v,k) => 0);



        function setGraph() {
            var myChart = echarts.init(document.getElementById('gragh1'));
            var option = {
                title: {
                    text: '矿工收益数据'
                },
                legend: {
                    data:['收益']
                },
                xAxis: {
                    data: xData
                },
                yAxis: {
                },
                series: [{
                    name: '攻击者',
                    type: 'line',
                    data: attacker,
                    itemStyle: {
                        normal: {
                            color: "#CC3333",
                            lineStyle: {
                                color: "#CC3333",
                            }
                        }
                    }
                }, {
                    name: '被攻击矿池',
                    type: 'line',
                    data: pool,
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: "#003399",
                            lineStyle: {
                                color: "#003399",
                            }
                        }
                    }

                }, {
                    name: '其他',
                    type: 'line',
                    data: other,
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: "#000",
                            lineStyle: {
                                color: "#000",
                            }
                        }
                    }
                }, {
                    name: '攻击者理论值',
                    type: 'line',
                    data: attacker_normal,
                    itemStyle: {
                        normal: {
                            color: "#CCCCCC",
                            lineStyle: {
                                color: "#CCCCCC",
                            }
                        }
                    }
                }, {
                    name: '被攻击矿池理论值',
                    type: 'line',
                    data: pool_normal,
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: "#CCCCCC",
                            lineStyle: {
                                color: "#CCCCCC",
                            }
                        }
                    }

                }, {
                    name: '其他理论值',
                    type: 'line',
                    data: other_normal,
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: "#CCCCCC",
                            lineStyle: {
                                color: "#CCCCCC",
                            }
                        }
                    }
                }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


            var myChart_2 = echarts.init(document.getElementById('gragh2'));

            // 指定图表的配置项和数据
            var option_2 = {
                title: {
                    text: '攻击者收益变化'
                },
                tooltip: {
                    text: '这是我的提示信息'
                },
                legend: {
                    data:['收益']
                },
                xAxis: {
                    data: xData
                },
                yAxis: {
                },
                series: [{
                    name: '不发起BWH攻击',
                    type: 'line',
                    data: attacker_normal,
                    itemStyle: {
                        normal: {
                            color: "#CCCCCC",
                            lineStyle: {
                                color: "#CCCCCC",
                            }
                        }
                    }
                }, {
                    name: '发起BWH攻击',
                    type: 'line',
                    data: attacker,
                    itemStyle: {
                        normal: {
                            color: "#CC3333",
                            lineStyle: {
                                color: "#CC3333",
                            }
                        }
                    }
                }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart_2.setOption(option_2);

            var myChart_3 = echarts.init(document.getElementById('gragh3'));

            // 指定图表的配置项和数据
            var option_3 = {
                title: {
                    text: '矿池收益变化'
                },
                tooltip: {
                    text: '这是我的提示信息'
                },
                legend: {
                    data:['收益']
                },
                xAxis: {
                    data: xData
                },
                yAxis: {
                },
                series: [{
                    name: '被BWH攻击',
                    type: 'line',
                    data: pool,
                    itemStyle: {
                        normal: {
                            color: "#003399",
                            lineStyle: {
                                color: "#003399",
                            }
                        }
                    }
                }, {
                    name: '不被BWH攻击',
                    type: 'line',
                    data: pool_normal,
                    itemStyle: {
                        normal: {
                            color: "#CCCCCC",
                            lineStyle: {
                                color: "#CCCCCC",
                            }
                        }
                    }
                }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart_3.setOption(option_3);


            var myChart_4 = echarts.init(document.getElementById('gragh4'));
            // 指定图表的配置项和数据
            var option_4 = {
                title: {
                    text: '攻击者超收益'
                },
                tooltip: {
                    text: '这是我的提示信息'
                },
                legend: {
                    data:['收益']
                },
                xAxis: {
                    data: xData
                },
                yAxis: {
                },
                series: [{
                    name: '超收益',
                    type: 'line',
                    data: Array.from(attacker,(v,k) => v-attacker_normal[k]),
                }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart_4.setOption(option_4);
        }
        setGraph();


        function cal() {
            count++;
            if(count>=Len) {
                window.clearInterval(timeid);
                return ;
            }
            attacker_normal[count] = attacker_normal[count-1];
            pool_normal[count] = pool_normal[count-1];
            other_normal[count] = other_normal[count-1];
            attacker[count] = attacker[count-1];
            pool[count] = pool[count-1];
            other[count] = other[count-1];
            let result = Math.random();
            if(result<split1) {
                attacker_normal[count] += 12.5;
            }
            else if(result<split2) {
                pool_normal[count] += 12.5;
            }
            else {
                other_normal[count] +=12.5;
            }

            if(begin_BWH) {
                if(result<split1_BWH) {
                    attacker[count] += 12.5;
                }
                else if(result<split2_BWH) {
                    pool[count] += 12.5;
                }
                else {
                    other[count] +=12.5;
                }
            }
            else {
                attacker[count]=attacker_normal[count];
                pool[count]=pool_normal[count];
                other[count]=other_normal[count];
            }
            setGraph();
        }
        let timeid = window.setInterval(cal,5);

        function BeginBWH() {
            begin_BWH=true;
            split_power = document.getElementById("bwh").value;

            split1_BWH = (0.2-split_power)/(1-split_power)+0.3*split_power/(0.3+0.7*split_power-split_power*split_power);
            split2_BWH = 1-0.5/(1-split_power);
            console.log(count);
            console.log(begin_BWH);
            console.log(split1,split2);
            console.log(split1_BWH,split2_BWH);
        }
    </script>

<!--    设置最终结果-->
    <script>
        function getFinal() {
            window.clearInterval(timeid);
            // 图一：总收益图
            let initData = new XMLHttpRequest();
            initData.open('GET', './program-data/7600-(0.3,0.1,0.3,0.3)-(0.3,0.04,0.36,0.3)-noBWH/income.txt', false);// 文件路径
            initData.overrideMimeType("text/html;charset=utf-8");// 默认为utf-8
            initData.send(null);
            let liststr = initData.responseText
            let echartsData_noBWH = [[],[],[],[]];
            liststr.trim().split('\n').forEach(function(v, i){
                v.split(',').forEach(function(num,index) {
                    // console.log(num,index);
                    echartsData_noBWH[index].push(parseFloat(num));
                })
            })
            initData.open('GET', './program-data/7600-(0.3,0.1,0.3,0.3)-(0.3,0.04,0.36,0.3)-noBWH/income2.txt', false);// 文件路径
            initData.overrideMimeType("text/html;charset=utf-8");// 默认为utf-8
            initData.send(null);
            liststr = initData.responseText
            let echartsData2_noBWH = [[],[],[],[]];
            liststr.trim().split('\n').forEach(function(v, i){
                v.split(',').forEach(function(num,index) {
                    echartsData2_noBWH[index].push(parseFloat(num));
                })
            })


            let xData = Array.from(Array(7621), (v,k) => k+1);

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('gragh1'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '矿工收益数据'
                },
                tooltip: {
                    text: '这是我的提示信息'
                },
                legend: {
                    data:['收益']
                },
                xAxis: {
                    data: xData
                },
                yAxis: {},
                series: [{
                    name: '矿工1',
                    type: 'line',
                    data: echartsData_noBWH[0],
                }, {
                    name: '矿工2',
                    type: 'line',
                    data: echartsData_noBWH[1],
                    symbolSize: 10,
                    itemStyle: {
                        normal: {
                            color: "#000",
                            lineStyle: {
                                color: "#000",
                            }
                        }
                    }

                }, {
                    name: '矿工3',
                    type: 'line',
                    data: echartsData_noBWH[2],
                    symbolSize: 10,
                    itemStyle: {
                        normal: {
                            color: "#000",
                            lineStyle: {
                                color: "#000",
                            }
                        }
                    }
                },
                    {
                    name: '矿工4',
                    type: 'line',
                    data: echartsData_noBWH[3]
                },
                    {
                    name: '矿工5',
                    type: 'line',
                    data: echartsData2_noBWH[0]
                },
                    {
                    name: '矿工6',
                    type: 'line',
                    data: echartsData2_noBWH[1]
                },
                    {
                    name: '矿工7',
                    type: 'line',
                    data: echartsData2_noBWH[2]
                },
                    {
                    name: '矿工8',
                    type: 'line',
                    data: echartsData2_noBWH[3]
                },
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            //图二，发起和不发起攻击的收益
            initData.open('GET', './program-data/1w-(0.3,0.1,0.3,0.3)-(0.3,0.04,0.36,0.3)-(2,3)to(1)BWH-1/income.txt', false);// 文件路径
            initData.overrideMimeType("text/html;charset=utf-8");// 默认为utf-8
            initData.send(null);
            liststr = initData.responseText
            let echartsData_BWH = [[],[],[],[]];
            liststr.trim().split('\n').forEach(function(v, i){
                v.split(',').forEach(function(num,index) {
                    // console.log(num,index);
                    echartsData_BWH[index].push(parseFloat(num));
                })
            })
            initData.open('GET', './program-data/1w-(0.3,0.1,0.3,0.3)-(0.3,0.04,0.36,0.3)-(2,3)to(1)BWH/income2.txt', false);// 文件路径
            initData.overrideMimeType("text/html;charset=utf-8");// 默认为utf-8
            initData.send(null);
            liststr = initData.responseText
            let echartsData2_BWH = [[],[],[],[]];
            liststr.trim().split('\n').forEach(function(v, i){
                v.split(',').forEach(function(num,index) {
                    echartsData2_BWH[index].push(parseFloat(num));
                })
            })

            let attack_miner = Array.from(Array(10000), (v,k) => k+1);
            let attack_miner_noBWH = Array.from(Array(10000), (v,k) => k+1);

            let xData_BWH = Array.from(Array(10000), (v,k) => k+1);
            for(let i in echartsData_BWH[1]) {
                attack_miner[i] = echartsData_BWH[1][i]+echartsData_BWH[2][i];
            }
            for(let i in echartsData_BWH[1]) {
                attack_miner_noBWH[i] = (echartsData_BWH[0][i]+echartsData_BWH[1][i]+echartsData_BWH[2][i]+echartsData_BWH[3][i])*0.4;
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart_2 = echarts.init(document.getElementById('gragh2'));

            // 指定图表的配置项和数据
            var option_2 = {
                title: {
                    text: '攻击者收益变化'
                },
                tooltip: {
                    text: '这是我的提示信息'
                },
                legend: {
                    data:['收益']
                },
                xAxis: {
                    data: xData_BWH
                },
                yAxis: {},
                series: [{
                    name: '不发起BWH攻击',
                    type: 'line',
                    data: attack_miner_noBWH,
                }, {
                    name: '发起BWH攻击',
                    type: 'line',
                    data: attack_miner,
                }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart_2.setOption(option_2);

                //矿池收益变化
                // 基于准备好的dom，初始化echarts实例
            var myChart_3 = echarts.init(document.getElementById('gragh3'));

            let pool_noBWH = Array.from(Array(10000), (v,k) => k+1);

            for(let i in echartsData_BWH[1]) {
                pool_noBWH[i] = (echartsData_BWH[0][i]+echartsData_BWH[1][i]+echartsData_BWH[2][i]+echartsData_BWH[3][i])*0.3;
            }

            // 指定图表的配置项和数据
            var option_3 = {
                title: {
                    text: '矿池收益变化'
                },
                tooltip: {
                    text: '这是我的提示信息'
                },
                legend: {
                    data:['收益']
                },
                xAxis: {
                    data: xData_BWH
                },
                yAxis: {},
                series: [{
                    name: '被BWH攻击',
                    type: 'line',
                    data: echartsData_BWH[0],
                }, {
                    name: '不被BWH攻击',
                    type: 'line',
                    data: pool_noBWH,
                }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart_3.setOption(option_3);

            //图四：攻击者超收益
                // 基于准备好的dom，初始化echarts实例
            var myChart_4 = echarts.init(document.getElementById('gragh4'));

            let extra_income = Array.from(Array(10000), (v,k) => k+1);

            for(let i in echartsData_BWH[1]) {
                extra_income[i] = (echartsData_BWH[1][i]+echartsData_BWH[2][i])-(echartsData_BWH[0][i]+echartsData_BWH[1][i]+echartsData_BWH[2][i]+echartsData_BWH[3][i])*0.4;
            }

            // 指定图表的配置项和数据
            var option_4 = {
                title: {
                    text: '攻击者超收益'
                },
                tooltip: {
                    text: '这是我的提示信息'
                },
                legend: {
                    data:['收益']
                },
                xAxis: {
                    data: xData_BWH
                },
                yAxis: {},
                series: [{
                    name: '超收益',
                    type: 'line',
                    data: extra_income,
                }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart_4.setOption(option_4);
        }
    </script>
</body>
</html>